<!DOCTYPE html>
<html lang="zh_CN" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增用户信息</title>
    <header th:replace="header.html"></header>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>用户名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_username" th:value="${sysUser.username}" name="username" required=""
                           lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    将会成为您唯一的登入名
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">
                    <span class="x-red">*</span>密码
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="L_pass" th:value="${sysUser.password}" name="password" required=""
                           lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    4到16个字符
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                    <span class="x-red">*</span>确认密码
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="L_repass" name="repass" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_nickname" class="layui-form-label">
                    <span class="x-red">*</span>昵称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_nickname" th:value="${sysUser.nickname}" name="nickname" required=""
                           lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    头像
                </label>
                <div class="layui-input-inline">
                    <div class="layui-upload-drag" id="headImg">
                        <i class="layui-icon" style="font-size:50px;">&#xe67c;</i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <div class="layui-hide" id="uploadPhoto">
                            <hr>
                            <img th:src="@{/upload/imgs/head.jpg}" class="layui-circle" alt="头像">
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" id="photo" name="photo" th:value="${sysUser.photo}">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>性别
                </label>
                <div class="layui-input-inline">
                    <input type="radio" th:field="${sysUser.sex}" name="sex" title="男" value="1" checked>
                    <input type="radio" th:field="${sysUser.sex}" name="sex" title="女" value="0">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="age" class="layui-form-label">
                    <span class="x-red">*</span>年龄
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="age" th:value="${sysUser.age}" name="age" required="" lay-verify="age"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>出生日期
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_birthday" th:value="${sysUser.birthday}" name="birthday"
                           placeholder="yyyy-MM-dd" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="telephone" class="layui-form-label">
                    <span class="x-red">*</span>手机
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="telephone" th:value="${sysUser.telephone}" name="telephone" required=""
                           lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    11位数字
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_email" class="layui-form-label">
                    <span class="x-red">*</span>邮箱
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_email" th:value="${sysUser.email}" name="email" required=""
                           lay-verify="required|email" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    XXXX@163.com
                </div>
            </div>

            <input type="text" id="roleId" name="roleId" style="display:none;"/>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>角色</label>
                <div class="layui-input-block show-role-container">

                </div>
            </div>
            <div class='layui-form-item'>
                <label class='layui-form-label'><span class='x-red'>*</span>状态</label>
                <div class="layui-input-block">
                    <input type="radio" th:field="${sysUser.status}" name="status" title="启用" value="1" checked>
                    <input type="radio" th:field="${sysUser.status}" name="status" title="锁定" value="2">
                    <input type="radio" th:field="${sysUser.status}" name="status" title="无效" value="0">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button class="layui-btn layui-btn-danger" lay-filter="add" lay-submit="">
                    <i class="iconfont">&#xe6ad;</i>立即保存
                </button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer', 'laydate', 'jquery', 'upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            laydate = layui.laydate;

        laydate.render({
            elem: '#L_birthday',
            format: 'yyyy-MM-dd',
            trigger: 'click'
        });

        getAllRole(function () {
            layui.form.render('radio');
        });

        //自定义验证规则
        form.verify({
            username: function (value) {
                if (value.length < 4) {
                    return '用户名至少得4个字符啊';
                }
            },
            pass: [/(.+){4,12}$/, '密码必须4到12位'],
            repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });
        var loading = null;
        var uploadInst = upload.render({
            elem: '#headImg',
            url: '/fileUpload/upload',
            exts: 'jpg|png|gif|bmp|jpeg',
            size: 1024 * 10,
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#uploadPhoto').removeClass('layui-hide').find('img').attr('src', result);//图片链接（base64）
                    loading = layer.load();
                });
                //传入参数
                this.data = {"username": $("#L_username").val()};
            },
            done: function (res) {
                if (res.code == 0) {
                    //把地址放入一个隐藏的input中, 和表单一起提交到后台
                    layer.close(loading);
                    layer.msg('上传成功');
                    $("#photo").val(res.data.src);
                } else {
                    layer.close(loading);
                    layer.msg(res.msg);
                }
            },
            error: function () {
                //上传失败，并实现重传
                layer.close(loading);
                layer.confirm('上传失败，您是否需要重新上传?', {icon: 3, title: '提示'}, function (index) {
                    layer.close(index);
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(add)', function (data) {
            var roleRadio = $("[name=roleId]:checked");
            if (roleRadio == undefined || roleRadio.length <= 0) {
                layer.alert("请给该用户设置角色");
                return false;
            }
            data.field.roleId = roleRadio.val();
            $.ajax({
                url: "/user/add",
                type: "POST",
                data: data.field,
                dataType: "json",
                success: function (result) {
                    if (result.code == 500 || result.code == 5000100 || result.code == 5000101 || result.code == 5000102) {
                        layer.alert(result.msg);
                    } else {
                        layer.alert("设置成功", {icon: 6}, function (index) {
                            xadmin.close();
                            xadmin.father_reload();
                        });
                    }
                }
            });
            return false;
        });

        function getAllRole(callback) {
            $.ajax({
                url: "/role/all",
                type: "GET",
                dataType: "json",
                success: function (result) {
                    var html = "";
                    if (result.datas && result.datas.length > 0) {
                        for (i in result.datas) {
                            html += '<input type="radio" name="roleId" value="' + result.datas[i].id + '" title="' + result.datas[i].name + '">'
                            html += '<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>' + result.datas[i].name + '</div></div>';
                        }
                        $(".show-role-container").html(html);
                        callback();
                    }
                }
            });
        }
    });
</script>
</body>
</html>
